<!--A Design by W3layouts 
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>Gridzilla A Entertainment Category Flat Bootstarp Resposive Website Template | Blog :: w3layouts</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />	
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!--//fonts-->
</head>
<body> 
<!--header-->
	<div class="header">
			<div class="container">
			<div class="header-top">
				<div class="logo">
					<a href="index.htm"><img src="images/logo.png" alt="" /></a>
				</div>
				<div class="search">
					<form>
						<input type="text" value="Enter your search..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}" >
						<input type="submit"  value="">
					</form>
				</div>
			<div class="clearfix"> </div>
		</div>
				<div class="top-nav">
				<span class="menu"> </span>
					<ul>
						<li ><a href="index.htm" > HOME </a></li>
						<li><a href="about.htm" > ABOUT </a></li>
						<li class="active"><a href="blog.htm" > BLOG</a></li>						
						<li><a href="contact.htm" >CONTACT</a></li>
					</ul>
					<script>
						$("span.menu").click(function(){
							$(".top-nav ul").slideToggle(500, function(){
							});
						});
					</script>
				</div>
			</div>
		</div>
	<!---->
	<div class="content">
	<div class="container">
			<div class="portfolio-grid">
			<h2>A Theme Unlike Any Other. Simply Fantastic!</h2>
					<ul id="filters">
						<li class="active"><span class="filter " data-filter="app card icon set web">ALL</span> /</li>
						<li><span class="filter" data-filter="app"> News </span> /</li>
						<li><span class="filter" data-filter="card"> Design  </span> /</li>
						<li><span class="filter" data-filter="icon">Print</span> /</li>
						<li><span class="filter" data-filter="set"> Art </span> /</li>
						<li><span class="filter" data-filter="web"> Development </span></li>
					</ul>
					<div id="portfoliolist">
					<div class=" port-grid">
					<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper ">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon">
						    <img class="img-responsive" src="images/po.jpg" alt=""  />
						     <div class="simple-in">
							 <i class="plus-in"> </i>
								<ul class="social">
									<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
									<div class="clearfix"> </div>
								</ul>
						    </div></a>
							<div class="simple-out">
								<h4><a href="single.htm">Sticker Mule</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
						</div>
					</div>				
					<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						    <img class="img-responsive" src="images/po4.jpg" alt=""  />
							
						     <div class="simple-in sed">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>23</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>11</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>	</a>
						<div class="simple-out">
								<h4><a href="single.htm">Big Buck Bunny</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
		                </div>
					</div>		
					<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/po8.jpg"  alt="" />
						     
						     <div class="simple-in in-on">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>	</a>
							<div class="simple-out">
								<h4><a href="single.htm">Pinterest Icons</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
		                </div>
					</div>
				</div>	
				<div class="  port-grid">
					<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper ">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/po1.jpg" alt=""  />
						    
						     <div class="simple-in sed">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>	</a>
							<div class="simple-out">
								<h4><a href="single.htm">10 Amazing Websites</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
		                </div>
					</div>	
					<div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper ">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/po5.jpg" alt=""  />
						     
						     <div class="simple-in in-on">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>	</a>
							<div class="simple-out">
								<h4><a href="single.htm">Character Design</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
		                </div>
					</div>			
					<div class="portfolio set mix_all" data-cat="set" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/po9.jpg" alt=""  />
						   
						     <div class="simple-in sed">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>		</a>
							<div class="simple-out">
								<h4><a href="single.htm">iPad 3 Review</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>
		                </div>
					</div>
					</div>
					<div class=" port-grid">
					<div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/po2.jpg" alt=""  />
						
						     <div class="simple-in in-on">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>	</a>
							<div class="simple-out">
								<h4><a href="single.htm">Top iPhone Apps</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
		                </div>
					</div>
					<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/po6.jpg" alt=""  />						    
						     <div class="simple-in">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>	</a>
							<div class="simple-out">
								<h4><a href="single.htm">Service Icons</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
		                </div>
					</div>
					<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper ">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon">
						    <img class="img-responsive" src="images/po10.jpg" alt=""  />
						    
						     <div class="simple-in eight">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>	</a>
							<div class="simple-out">
								<h4><a href="single.htm">Social Media Buttons</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
						</div>
					</div>	
					</div>
					<div class=" port-grid">					
					<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						    <img class="img-responsive" src="images/po3.jpg" alt=""  />
						    
						     <div class="simple-in so-in">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>	</a>
							<div class="simple-out">
								<h4><a href="single.htm">Photo Shoot</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
		                </div>
					</div>		
					<div class="portfolio set mix_all" data-cat="set" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/po7.jpg"  alt="" />						     
						     <div class="simple-in">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>
							</a>
							<div class="simple-out">
								<h4><a href="single.htm">Wedding Card</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
		                </div>
					</div>				
					<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper ">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/po11.jpg" alt=""  />
						     <div class="simple-in so-on">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div></a>
								 <div class="simple-out">
								<h4><a href="single.htm">Silver UI Kit</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>
		                </div>
					</div>	
					</div>	
			<!-- Script for gallery Here -->
				<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
					<script type="text/javascript">
					$(function () {
						
						var filterList = {
						
							init: function () {
							
								// MixItUp plugin
								// http://mixitup.io
								$('#portfoliolist').mixitup({
									targetSelector: '.portfolio',
									filterSelector: '.filter',
									effects: ['fade'],
									easing: 'snap',
									// call the hover effect
									onMixEnd: filterList.hoverEffect()
								});				
							
							},
							
							hoverEffect: function () {
							
								// Simple parallax effect
								$('#portfoliolist .portfolio').hover(
									function () {
										$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
										$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');				
									},
									function () {
										$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
										$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');								
									}		
								);				
							
							}
				
						};
						
						// Run the show!
						filterList.init();
						
						
					});	
					</script>
			<!-- Gallery Script Ends -->
			<div class="clearfix"> </div>
			</div>
		</div>
		
	</div>
	</div>
	<!--footer-->
	<div class="footer">
		<div class="container">
		<div class="footer-top">
			<ul class="social-ic-icons">
				<li><a href="#"><span> </span></a></li>
				<li class="dribble"><a href="#"><span> </span></a></li>
				<li class="facebook"><a href="#"><span> </span></a></li>
				<li class="print"><a href="#"><span> </span></a></li>					
			</ul> 
			<p class="footer-grid">Copyright &copy; 2015 Gridzilla Template by <a href="http://w3layouts.com/" target="_blank">W3layouts</a> </p>
			<div class="clearfix"> </div>
		</div>
		 </div>
	 </div>
</body>
</html>